<template>
	<div :class="'bg-white p-2'">
		<Row :class="'m-1'">
			<Col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6" :span="4">
			<Input :class="'w-10 m-2'" v-model="name" placeholder="请输入会员卡名称" />
			</Col>
			<Col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6" :span="4">
			<Select :class="'w-100 m-2'" v-model="statu" clearable placeholder="请选择会员卡状态" @change="" clearable>
				<Option v-for="item in status" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
			</Col>
			<Col :xs="24" class="p-1">
			<Button class="float-left m-2" type="error" shape="circle" @click="newCardType" icon="md-add">新增</Button>
			<Button class="float-right m-2" type="primary" shape="circle" @click="init()" icon="ios-search">查询</Button>
			</Col>
		</Row>
		<div class="mt-1 d-xl-none">
			<Row>
				<Col v-for="(cardType, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
					:span="4" class="p-1 ">
				<div class="shadow p-3 radius text-xs text-secondary">
					<div class="p-1 d-flex justify-content-between ">
						<span>编号</span>
						<span>{{index + (tableInfo.currentPage - 1) * tableInfo.pageSize + 1}}</span>

					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>会员卡名称</span>
						<span>{{cardType.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>有效天数/天</span>
						<span>{{cardType.timeLongs / 60 / 24}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>会员卡价格</span>
						<span>{{cardType.amount}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>会员卡状态</span>
						<!-- <span>{{cardType.statu}}</span> -->
						<span v-if="cardType.statu==1">可用</span>
						<span v-else>禁用</span>
					</div>
					<div class="p-1 d-flex justify-content-end text-sm">
						<Button type="error" @click="remove(cardType.cardTypeId)" ghost>删除</Button>
						<Button type="primary" class="ml-3" @click="show(cardType.cardTypeId)" ghost>详细</Button>

					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">

				<template slot-scope="{ row, index }" slot="timeLongs">
					<span v-if="row.timeLongs== 0"></span>
					<span v-else>{{row.timeLongs/60/24}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="amount">
					<span>{{row.amount/10/10}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" @click="show(row.cardTypeId)">详情</Button>
					<Button type="error" size="small" @click="remove(row.cardTypeId)">删除</Button>
				</template>

			</Table>
		</div>
		<div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				name: '',
				statu: '',
				cardTypeId: '',
				status: [{
						value: "1",
						label: "可用"
					},
					{
						value: "0",
						label: "禁用"
					}
				],
				tableInfo: {
					currentPage: 1,
					total: 0,
					pageSize: 12,
					columnInfo: [{
							title: "编号",
							key: "cardTypeId",
							// 每页编号不显示数据库的主键
							render: (h, params) => {
								let nowPage = params.index + (this.tableInfo.currentPage - 1) * this.tableInfo
									.pageSize + 1;
								return h('span', nowPage);
							},
						},
						{
							title: "会员卡名称",
							key: "name",
						},
						{
							title: "有效天数/天",
							slot: "timeLongs",
							//页面显示金额以元为单位，而不是数据储存的以分为单位
							// render: (h, params) => {
							// 	let time = params.row.timeLongs / 60 / 24;
							// 	return h('span', time);
							// },
						},
						{
							title: "会员卡价格",
							slot: "amount",
						},
						{
							title: "会员卡状态",
							key: "statu",
							render: (s, params) => {
								let st = params.row.statu;
								if (st == 1) {
									return s('span', '可用')
								} else {
									return s('span', '禁用');
								}
							}
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}

			};
		},
		computed: {
			render: (h, params) => {
				let nowPage = params.index + (this.tableInfo.currentPage - 1) * this.tableInfo
					.pageSize + 1;
				return h('span', nowPage);
			},
			render: (s, params) => {
				let st = params.row.statu;
			},
			render: (h, params) => {
				let time = params.row.timeLongs / 60 / 24;
				return h('span', time);
			},

		},



		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 1;
				this.search();
			},

			newCardType: function() {
				//跳转新增页面
				this.$router.push({
					name: "cardType_new"
				});
			},
			//跳转详细页面
			show: function(cardTypeId) {
				this.$router.push({
					name: "cardType_detail",
					params: {
						cardTypeId
					}
				});
			},
			search: function() {
				this.http.get({
					url: "/client/card-type/list",
					param: {
						currentPage: this.$data.tableInfo.currentPage,
						pageSize: this.$data.tableInfo.pageSize,
						name: this.$data.name,
						statu: this.$data.statu
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
					//防止模糊查询时分页查询被污染
					let totalPage = Math.ceil(this.tableInfo.total / this.tableInfo.pageSize);
					totalPage = totalPage < 1 ? 1 : totalPage;
					if (this.tableInfo.currentPage > totalPage) {
						this.$data.tableInfo.currentPage = totalPage;
						this.search();
					};
				});
			},
			pageSearch: function(changedPage) {
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			},
			remove: function(cardTypeId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除会员卡类型，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/client/card-type/info",
							param: {
								cardTypeId
							}
						}).then(data => {
							this.message.info("删除成功");
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		},
		created: function() {
			this.init();
		},
		watch: {
			$route(to, from) {
				if (to.path == "/cardType") {
					this.init();
				}
			}
		},
	}
</script>

<style>
</style>